/**
 * NearByDialog
 */

 var React = require("react");
 var tool = require("../../../util/tool");
 var storage = require("../../../util/storage");
 var NearByDialog = React.createClass({
    getInitialState: function (){
        return {
            search: ""
        }
    },
    getDefaultProps: function (){
        return {
            root: {},
            widget: {}
        }
    },
    componentWillMount: function (){
        this.iframe = this.getIframe();
        this.iframe.on('load', function (){
            // IP定位
            this.iframe[0].contentWindow.setCurrentCity(function (result){
                this.locateCallback(result);
                if (this.search){
                    this.placeSearch(this.cityCode, this.search);
                }
            }.bind(this));
            // 附近搜索
            this.placeSearch = this.iframe[0].contentWindow.placeSearch;
            this.toggleResultPanel = this.iframe[0].contentWindow.toggleResultPanel;
        }.bind(this));

        // 城市编码
        this.cityCode = "";

        var widget = this.props.data;
        this.search = widget.action.search_nearby || "";

        this.setState({
            search: this.search
        });
    },
    componentDidMount: function (){
        this.iframe.appendTo($(this.refs.gmappicker));
    },
    locateCallback: function (result){
        this.cityCode = result.adcode;
    },
    getIframe: function (){
        // tip=0表示不显示地图右键定位提示
        return $("<iframe>").attr({
            src: storage.data.CONST.urls.gmap + "?tip=0",
            width: "100%",
            height: "400px",
            frameborder: 0,
            allowtransparency: 1
        });
    },
    handleOnSearch: function (){
        var search = this.state.search;

        if (!search){
            alert("请输入搜索关键词！");
            return;
        }
        if(!this.placeSearch){
            alert("正在加载地图，请稍等...");
            return;
        }
        this.placeSearch(this.cityCode, search);

        var widget = this.props.widget;
        widget.action = $.extend(widget.action, { search_nearby: search, city_code: this.cityCode });

        var root = this.props.root;
        root.updateLocaleWidget(widget);
    },
    handleOnChangeSearch: function (e){
        var keyword = $(e.target).val();
        this.setState({
            search: keyword
        });
    },
    handleOnSubmit: function (){
        var data = this.props.data;

        data.action.search_nearby = this.state.search;

        var root = this.props.root;
        root.closeDialog();
        root.updateSpecifyWidget(data);
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    render: function (){
        var rStyle = {
            position: "fixed",
            top: "50%",
            left: "50%",
            width: "670px",
            height: "auto",
            marginLeft: "-335px",
            marginTop: "-335px",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };
        return (
            <dialog ref="dialog" style={rStyle} className="btg-modal widget-form">
                <div className="btg-modal-content location-region">
                    <div className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._("Search nearby")}</label>
                        </div>
                        <div className="form-group form-group-nearby">
                            <div className="rowli">
                                <div>
                                    <input name="search" type="text" className="search-input target form-control" onChange={this.handleOnChangeSearch} value={this.state.search} placeholder="输入附近搜索关键字" />
                                    <div onClick={this.handleOnSearch} type="submit" className="search-btn">
                                        <span>搜索</span>
                                    </div>
                                </div>
                                <div className="search-tip">将在地图中显示用户位置附近的关键字信息</div>
                                <div ref="gmappicker" className="gmap-gmappicker">
                                </div>
                            </div>
                        </div>
                        <div className="form-group buttons">
                            <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = NearByDialog;
